{extend name="public/layout" /}
{block name="head_css"}
    <style>
        .sam-header {
            background-color: #ff7200;
        }

        .sam-header .back,.sam-header .name {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back {
            width: 20%;
            font-size: 0;
        }

        .sam-header .back>a .arrow,.sam-header .back>a .words {
            display: inline-block;
            vertical-align: middle;
        }

        .sam-header .back>a .arrow {
            width: 30%;
            padding-top: 30%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            background-image: url('/static/index/image/icon_arrow_back_fff.png');
        }

        .sam-header .back>a .words {
            font-size: 1rem;
        }

        .sam-header .name {
            width: 60%;
            margin-right: 20%;
            font-size: 1rem;
            color: #fff;
            text-align: center;
        }

        .sam-header .back>a,.sam-header .back>a:active {
            color: #fff;
            text-decoration: none;
        }

        .comment-box {
            box-sizing: border-box;
            padding: .5rem .8rem 0 .8rem;
            font-size: 0;
        }

        .comment-box .citem {
            font-size: .9rem;
            display: inline-block;
            vertical-align: middle;
            margin-right: .5rem;
            padding: .1rem .3rem;
            color: #aaa;
            border: #ccc solid 1px;
            margin-bottom: .5rem;
            cursor: pointer;
        }

        .comment-box .citem.chosen {
            color: #ff7200;
            border-color: #ff7200;
        }

        .submit-btn {
            width: 60%;
            box-sizing: border-box;
            padding: .3rem 0;
            color: #fff;
            background-color: #ff7200;
            margin: 1rem auto;
            text-align: center;
            border-radius: .15rem;
        }
    </style>
{/block}
{block name="main"}
<div class="container sam-header">
    <div class="back">
        <a onclick="history.back(-1)">
            <div class="arrow"></div>
        </a>
    </div>
    <div class="name">发表评论</div>
</div>
<!-- 头部 END -->

<!-- 评论内容 -->
<div class="container sam-white-bg comment-box">
    {foreach name="list" item="item"}
        <div class="citem" data-id="{$item.id}">{$item.name}</div>
    {/foreach}
</div>

<div  class="submit-btn">发布评论</div>
{/block}
{block name="footer"}
{/block}
{block name="script"}
<script>
    $('.comment-box .citem').click(function () {
        var _this = $(this);
        var cname = 'chosen';
        _this.hasClass(cname) ? _this.removeClass(cname) : _this.addClass(cname);
    });

    $('.submit-btn').click(function () {
        var chosen = [];
        $('.comment-box .citem.chosen').each(function (ind,elm) {
            chosen.push($(elm).attr('data-id'));
        });
        chosen = chosen.join(',');
        if(chosen.length == 0){
            alert('您还没有选择任何评论');
        }else{
            var d = new Object();
            d.id = {$id};
            d.tag_ids = chosen;
            $.post('{:url('add_comment')}',d,function(res){
                if(res.code == 1){
                    alert('评论成功！');
                    self.location=document.referrer;
                }else if(res.code == -2){
                    window.location.href = '{:url('login/index')}';
                }else{
                    alert('评论失败！');
                }
            })
        }
    });
</script>
{/block}